<template>
  <div class="dialog_audio">
    <ul class="list">
      <li v-for="item in sourceList.list" :title="item.name">
        <el-radio v-model="sel" :label="item.id">{{item.name}}</el-radio>
        <span>{{item.createTime}}</span>
        <img src="../../../assets/audio.png" alt="">
      </li>
    </ul>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page.sync="page"
        :page-size.sync="size"
        layout="total, prev, pager, next, jumper"
        :total="sourceList.page.total"
        @current-change="initComponent()">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {mapState, mapActions, mapMutations} from 'vuex'
  export default {
    data () {
      return {
        sel: null,
        page: 1,
        size: 10
      }
    },
    mounted () {
      const that = this
      this.initComponent()
      this.$bus.$on('reloadAudio', function () {
        that.initComponent()
      })
    },
    watch: {
      sel (val) {
        this.SELECT_SOURCE(this.sourceList.list.filter(item => item.id === val)[0])
      }
    },
    computed: {
      ...mapState({
        curDir: state => state.sourceManage.currentDir,
        sourceList: state => state.sourceManage.audioList,
        selected: state => state.sourceManage.selected
      })
    },
    methods: {
      ...mapActions(['getSourceList']),
      ...mapMutations(['SELECT_SOURCE']),
      // 初始化组件
      async initComponent () {
        await this.getSourceList({
          type: 3,
          size: this.size,
          page: this.page
        })
      }
    }
  }
</script>
<style lang="scss">
  .dialog_audio{
    .list{
      &{height:400px;line-height:60px;overflow-y:auto;}
      li{display:flex;padding:16px 0;width:100%;justify-content:space-between;border-bottom:1px solid #e7e7eb}
      img{width:60px;height:60px;}
    }
    .el-radio__label{width: 250px;display: inline-block;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align: middle;}
  }
</style>
